import React, { createElement, FC } from 'react'
import { Button } from 'antd'
import styles from './index.less'

interface EditableLinkGroupProps {
  links: Array<any>;
  onAdd?: () => void;
  linkElement?: any;
}

const EditableLinkGroup: FC<EditableLinkGroupProps> = ({ links = [], onAdd = () => {}, linkElement = 'a' }) => {
  return (
    <div className={styles.linkGroup}>
      {
        links.map((link: any) =>
          createElement(
            linkElement,
            {
              key: `linkGroup-item-${link.id || link.title}`,
              to: link.href,
              href: link.href
            },
            link.title
          )
        )
      }
      {
        <Button size='small' type='primary' ghost onClick={onAdd} icon='plus'>
          添加
        </Button>
      }
    </div>
  )
}

export default EditableLinkGroup
